<template>
    <div>
        <FixedHeightVue>
            <!-- 数据统计页 学生-->
            <div class="gird" v-if="userInfo.roleType == 2">
                <div class="home-card-item">
                    <!-- 动画 -->
                    <div class="animation_top_left"></div>
                    <div class="animation_bottom_right"></div>
                    <div class="home-card-item-left home-one-animation0">
                        <div class="home-card-item-left-top">
                            <div class="home-card-item-left-top-left">{{ statisticsTopDataStu.averageScore }}</div>
                            <div class="home-card-item-left-top-right">-12.33%</div>
                        </div>
                        <div class="home-card-item-left-bottom">平均分</div>
                    </div>
                    <div class="home-card-item-right home-one-animation0">
                        <img src="@/assets/yingyupingjunfen-01.png" alt="">
                    </div>
                </div>
                <div class="home-card-item ">
                    <div class="home-card-item-left home-one-animation1">
                        <div class="home-card-item-left-top">
                            <div class="home-card-item-left-top-left">{{ statisticsTopDataStu.accuracy }}</div>
                            <div class="home-card-item-left-top-right">-12.33%</div>
                        </div>
                        <div class="home-card-item-left-bottom ">
                            正确率
                        </div>
                    </div>
                    <div class="home-card-item-right home-one-animation1">
                        <img src="@/assets/wanchengshuai.png" alt="">
                    </div>
                </div>
                <div class="home-card-item ">
                    <div class="home-card-item-left home-one-animation2">
                        <div class="home-card-item-left-top">
                            <div class="home-card-item-left-top-left">{{ statisticsTopDataStu.percentageComplete }}
                            </div>
                            <div class="home-card-item-left-top-right">-12.33%</div>
                        </div>
                        <div class="home-card-item-left-bottom">完成率</div>
                    </div>
                    <div class="home-card-item-right home-one-animation2">
                        <img src="@/assets/zhengqueshuai.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 老师 -->
            <div class="gird" v-if="userInfo.roleType == 1">
                <div class="home-card-item">
                    <!-- 动画 -->
                    <!-- <div class="animation_top_left"></div> -->
                    <!-- <div class="animation_bottom_right"></div> -->
                    <div class="home-card-item-left home-one-animation0">
                        <div class="home-card-item-left-top">
                            <div class="home-card-item-left-top-left">{{ statisticsTopData.loginNumber }}</div>
                            <div class="home-card-item-left-top-right">-12.33%</div>
                        </div>
                        <div class="home-card-item-left-bottom">七天登录次数</div>
                    </div>
                    <div class="home-card-item-right home-one-animation0">
                        <img src="@/assets/drxx92.png" alt="">
                    </div>
                </div>
                <div class="home-card-item ">
                    <div class="home-card-item-left home-one-animation1">
                        <div class="home-card-item-left-top">
                            <div class="home-card-item-left-top-left">{{ statisticsTopData.addWorkNumber }}</div>
                            <div class="home-card-item-left-top-right">-12.33%</div>
                        </div>
                        <div class="home-card-item-left-bottom ">
                            七天发布作业数量
                        </div>
                    </div>
                    <div class="home-card-item-right home-one-animation1">
                        <img src="@/assets/cehuifabupiliangfabu.png" alt="">
                    </div>
                </div>
                <div class="home-card-item ">
                    <div class="home-card-item-left home-one-animation2">
                        <div class="home-card-item-left-top">
                            <div class="home-card-item-left-top-left">{{ statisticsTopData.submitWorkNumber }}</div>
                            <div class="home-card-item-left-top-right">-12.33%</div>
                        </div>
                        <div class="home-card-item-left-bottom">七天提交作业数量</div>
                    </div>
                    <div class="home-card-item-right home-one-animation2">
                        <img src="@/assets/zuoye.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 图表 -->
            <div class="echarts_box">
                <!-- 滚动列表  学生-->
                <div class="scroll_list" v-if="userInfo.roleType == 2">
                    <!-- 滚动标题 -->
                    <div class="scroll_title">
                        <div class="item_left" style="flex:3;">课程名称</div>
                        <div class="item_midle" style="flex: 1;">平均分</div>
                        <div class="item_right" style="flex:1;">正确率</div>
                    </div>
                    <vue3-seamless-scroll :list="statisticsLeftDataStu" class="scroll" :step="0.5" :limitScrollNum="7"
                        :hover="true">
                        <div class="item" :class="{ color: index % 2 == 0 }"
                            v-for="(item, index) in statisticsLeftDataStu" :key="index">
                            <div class="item_left" style="flex:3;">{{ item.courseName }}</div>
                            <div class="item_midle" style="flex: 1;">{{ item.accuracy }}</div>
                            <div class="item_right" style="flex:1;">{{ item.percentageComplete }}%</div>
                        </div>
                    </vue3-seamless-scroll>
                </div>
                <!-- 老师 -->
                <div class="scroll_list" v-if="userInfo.roleType == 1">
                    <!-- 滚动标题 -->
                    <div class="scroll_title">
                        <div class="item_left">学生姓名</div>
                        <div class="item_midle">作业名称</div>
                        <div class="item_right">提交时间</div>
                    </div>
                    <vue3-seamless-scroll :list="statisticsLeftData" class="scroll" :step="0.5" :limitScrollNum="7"
                        :hover="true">
                        <div class="item" :class="{ color: index % 2 == 0 }" v-for="(item, index) in statisticsLeftData"
                            :key="index">
                            <div class="item_left">{{ item.userName }}</div>
                            <div class="item_midle">{{ item.workName }}</div>
                            <div class="item_right">{{ formatData(item.modifyTime) }}</div>
                        </div>
                    </vue3-seamless-scroll>
                </div>
                <div id="echartDD"></div>
            </div>
        </FixedHeightVue>
    </div>
</template>

<script setup>
import FixedHeightVue from "@/components/base/FixedHeight.vue";
import { ref, onMounted, reactive, onBeforeMount } from 'vue'
// 无限滚动插件
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import * as echarts from 'echarts';
import { ElMessage } from "element-plus";
import { getStatisticsTopApi, getStatisticsLeftApi, getStudentStatisticsRightApi, getStatisticsRightApi, getStudentStatisticsLeftApi, getStudentStatisticsTopApi } from "@/api/index";

import useUserInfo from "store/useUserInfo.js";
const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserInfoStore)


// 老师顶部的数据统计
const statisticsTopData = ref({
    loginNumber: 0,
    addWorkNumber: 0,
    submitWorkNumber: 0
})
const getStatisticsTopTea = async () => {
    const res = await getStatisticsTopApi({
        userId: userInfo.value.userId
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    statisticsTopData.value = res.data
}

// 老师左边的数据统计
const statisticsLeftData = ref([
])
const getStatisticsLeftTea = async () => {
    const res = await getStatisticsLeftApi({
        userId: userInfo.value.userId
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    statisticsLeftData.value = res.data
}
// 老师的echarts表
const statisticsRightData = ref([
])
const getStatisticsRightTea = async () => {
    const res = await getStatisticsRightApi({
        userId: userInfo.value.userId
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }

    statisticsRightData.value = res.data.map(line => {
        return {
            name: line.courseName,
            data: line.submitWorkNumber,
            type: 'line',
            smooth: true
        }
    })
    console.log("🚀 ~ getStatisticsRightTea ~ statisticsRightData:", statisticsRightData.value)
    myChartFun()
}

// 学生顶部的数据统计
const statisticsTopDataStu = ref({
    averageScore: 0,
    accuracy: 0,
    percentageComplete: 0
})

const getStatisticsTopStu = async () => {
    const res = await getStudentStatisticsTopApi({
        userId: userInfo.value.userId
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    statisticsTopDataStu.value = res.data
}
// 学生左边的数据统计
const statisticsLeftDataStu = ref([
])

const getStatisticsLeftStu = async () => {
    const res = await getStudentStatisticsLeftApi({
        userId: userInfo.value.userId
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        })
        return;
    }
    statisticsLeftDataStu.value = res.data
}
// 学生右边的图表
const statisticsRightDataStu = ref([

])
const getStudentStatisticsRight = async () => {
    const res = await getStudentStatisticsRightApi({
        userId: userInfo.value.userId
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        })
        return;
    }
    statisticsRightDataStu.value = res.data.map(line => {
        return {
            name: line.courseName,
            data: line.scoreList,
            type: 'line',
            smooth: true
        }
    })
    myChartFunStu()
}
// 格式化时间
const formatData = (cellValue) => {
    var s = new Date(cellValue).toLocaleString();
    return s;
};





// 最近七天时间
const time = ref([])
const commentTime = () => {
    const date = new Date()
    const day = date.getDate()
    const month = date.getMonth()
    const year = date.getFullYear()
    for (let i = 0; i < 7; i++) {
        time.value.push(new Date(year, month, day - i).toLocaleDateString())
    }
}




// 初始化echarts实例 老师

const myChartFun = () => {
    // echarts配置
    const option = {
        xAxis: {
            type: 'category',
            data: time.value.reverse(),
            name: "课程最近七天提交数量",
            nameLocation: "middle",
            nameTextStyle: {
                fontStyle: "normal",
                fontWeight: "bold",
                fontSize: 18
            },
            nameGap: 32
        },
        legend: {
            type: 'plain',
            right: 30,
            top: 20
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                symbol: ['none', 'arrow'],//只在末端显示箭头
                lineStyle: {
                    type: 'solid',
                    color: '#409eff',
                    // ...
                }
            },
            axisLabel: {
                show: true // 显示坐标轴标签
            },
            axisTick: {
                show: true // 显示刻度线
            }
        },
        tooltip: {
            trigger: "item",
            axisPointer: {
                type: "cross"
            }
        },
        series: statisticsRightData.value
    }
    const myChart = echarts.init(document.getElementById('echartDD'));
    option && myChart.setOption(option);
}
// 初始化echarts实例 学生

const myChartFunStu = () => {
    // echarts配置
    const option = {
        xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7],
            name: "最近七次课程提交作业分数",
            nameLocation: "middle",
            nameTextStyle: {
                fontStyle: "normal",
                fontWeight: "bold",
                fontSize: 18
            },
            nameGap: 32
        },
        legend: {
            type: 'plain',
            right: 30,
            top: 20
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                symbol: ['none', 'arrow'],//只在末端显示箭头
                lineStyle: {
                    type: 'solid',
                    color: '#409eff',
                    // ...
                }
            },
            axisLabel: {
                show: true // 显示坐标轴标签
            },
            axisTick: {
                show: true // 显示刻度线
            }
        },
        tooltip: {
            trigger: "item",
            axisPointer: {
                type: "cross"
            }
        },
        series: statisticsRightDataStu.value
    }
    const myChart = echarts.init(document.getElementById('echartDD'));
    option && myChart.setOption(option);
}

onBeforeMount(() => {
    commentTime()
    if (userInfo.value.roleType == 1) {
        getStatisticsTopTea()
        getStatisticsLeftTea()
        getStatisticsRightTea()
    }
    if (userInfo.value.roleType == 2) {
        getStatisticsTopStu()
        getStatisticsLeftStu()
        getStudentStatisticsRight()
    }
})

onMounted(() => {
})

</script>

<style scoped lang="scss">
.gird {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 15px;
    grid-template-areas: "a a a"
        "b b b";

    .home-card-item {
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 10px;
        height: 120px;
        display: flex;
        align-items: center;
        position: relative;

        &:hover {
            box-shadow: 0 2px 12px #0000001a;
            transition: all ease 0.3s;
        }

        &-left {
            flex: 2;

            &-top {
                display: flex;
                align-items: end;

                &-left {
                    font-size: 30px;
                    color: #303133;
                }

                &-right {
                    margin-left: 10px;
                    font-size: 16px;
                    /* font-weight: 600; */
                    color: rgb(255, 100, 98);

                }
            }

            &-bottom {
                font-size: 16px;
                color: #303133;
                margin-top: 10px;
            }
        }

        &-right {
            /* flex: 1; */
            display: inline-block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /* background-color: #fdf6ec; */

            img {
                width: 100px;
                height: 100%;
                border-radius: 50%;
            }
        }
    }
}

/* 动画 */
@for $i from 0 through 2 {
    .home-one-animation#{$i} {
        opacity: 0;
        animation-name: error-num;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/4) + s;
    }
}


@for $i from 0 through 10 {
    .x-animation#{$i} {
        opacity: 0;
        animation-name: translate-num;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/5) + s;
    }
}

.echarts_box {
    /* background-color: #fff; */
    height: calc(100% - 115px);
    display: flex;

    /* flex-direction: column; */
    .scroll_list {
        flex: 1;
        background-color: #fff;
        margin-right: 10px;
        /* padding: 15px; */
        margin-bottom: 10px;
        box-shadow: 0 2px 12px #0000001a;
        transition: all ease 0.3s;
        border-radius: 10px;
        overflow: hidden;

        .scroll {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .scroll_title {
            padding: 5px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 40px;
            font-weight: bold;
            /* 底部阴影 */
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

            .item_left {
                flex: 1;
                text-align: center;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .item_midle {
                flex: 3;

                font-size: 14px;
                text-align: center;
                /* 超出省略号 */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .item_right {
                flex: 2;
                text-align: center;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

            }
        }

        .scroll .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 50px;
            padding: 0 15px;

            .item_left {
                flex: 1;
                text-align: center;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .item_midle {
                flex: 3;
                font-size: 14px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .item_right {
                flex: 2;
                text-align: center;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .scroll .color {
            background-color: #b3c5a41a;
        }
    }

    #echartDD {
        flex: 3;
        background-color: #fff;
        margin-bottom: 10px;
        box-shadow: 0 2px 12px #0000001a;
        transition: all ease 0.3s;
        border-radius: 10px;
    }
}
</style>